import React, { Component } from 'react'

import TopNavBar from '@/components/TopNavBar'
import Swiper from '@/components/Swiper'

import { getSwiperListApi } from '@/services/feedService'
import SearchBtn from '@/components/SearchBtn'

import { withRouter } from 'react-router-dom';

// 菜谱大全的首页
@withRouter
class Feed extends Component {
  state = {
    swiperData: null
  }

  async componentDidMount() {
    let res = await getSwiperListApi()
    // this.setState({
    //   swiperData: res.data
    // })
    this.state.swiperData = res.data
    // 通知视图更新
    this.setState({})
  }

  render() {
    return (
      <div>
        {/* 顶部导航 */}
        <TopNavBar leftText="返回" onLeft={e => console.log(1000, e)}>
          菜谱大全
        </TopNavBar>
        {/* 幻灯片 */}
        <Swiper data={this.state.swiperData} />
        {/* 搜索按钮 */}
        <SearchBtn
          onClick={id => {
            this.props.history.push('/search')
          }}
        />
      </div>
    )
  }
}

export default Feed
